<template>
  <div class="music-page">
    <nav-unit />
    <div class="center-content">
      <div>
        <self-introduction />
        <div class="pictures" v-for="(title, index) in titles" :key="index">
          <el-image :src="require(`@/assets/Lostbelt/${title}.png`)" fit="cover"></el-image>
        </div>
      </div>
      <div class="music-box">
        <h1>音乐一览</h1>
        <div class="anime-music">
          <h2>风格迥异的音乐</h2>
          <meting-js server="netease" type="playlist" id="7508038144"></meting-js>
          <ol>
            <li>收录了各式各样的音乐，是作者从歌单收藏中随意挑选出的一部分</li>
            <li>原则是没有二次元的通通不行，为了偷懒就搬的网易云</li>
            <li>样式实在是有点丑，匮乏的想象力想不出好的改进方法</li>
            <li>凑凑字数让说明变得更高级</li>
            <li>说明到此结束</li>
          </ol>
        </div>
        <el-divider />
        <div class="fgo-music">
          <h2>异闻带纪行</h2>
          <p class="tips">跨越世界的旅途</p>
          <el-image :src="require('@/assets/Pictures/2.0.png')" fit="cover"></el-image>
          <div class="lostbelt" v-for="(lostbelt,index) in lostbelts" :key="index">
            <h4>{{lostbelt.title}}</h4>
            <el-image :src="require(`@/assets/Lostbelt/No.${titles[index]}.png`)" ></el-image>
            <div class="music-information">
              <div class="info">{{lostbelt.info}}</div>
              <meting-js server="netease" type="song" :id="lostbelt.id"></meting-js>
            </div>
          </div>
        </div>
      </div> 
      <div class="pictures">
        <div class="picture" v-for="(name,index) in pictureName" :key="index">
          <el-image :src="require(`@/assets/Pictures/${name}.png`)" fit="cover"></el-image>
        </div>
      </div>
    </div>
    <footer-unit />
  </div>
</template>

<script>
import NavUnit from '@/components/Navigation/NavUnit.vue'
import SelfIntroduction from '@/components/Author/SelfIntroduction.vue'
import FooterUnit from '@/components/Footer/FooterUnit.vue'

export default {
  name: 'MusicPage',
  components: { 
    NavUnit,
    SelfIntroduction,
    FooterUnit
  },
  setup() {
    let pictureName = ['A-team', '2.1', '2.2', '2.3', '2.4', '2.5.1', '2.5.2']
    let titles = ['1', '2', '3', '4', '5.1', '5.2', '6'] 
    let lostbelts = [
      {title: '永久冻土帝国 阿纳斯塔西娅', id: '1365427422', info:'俄罗斯异闻带，陨石自宇宙坠落，世界化作冰河'},
      {title: '无间冰焰世纪 诸神黄昏', id: '1365422879', info:'北欧异闻带，诸神黄昏的后续，虽侥幸回避毁灭，但宣告终结的时钟仍未停止'},
      {title: '人智统合真国 SIN', id: '1365427364', info:'中国异闻带，全球一统的秦，世界已然完结'},
      {title: '创世灭亡轮回 由伽·刹多罗', id: '1465973113', info:'印度异闻带，创世灭亡轮回，不恕邪恶的世界'},
      {title: '神代巨神海洋 亚特兰蒂斯', id: '1465973116', info:'大西洋异闻带，封锁外敌的绝海，星间都市山脉的门扉'},
      {title: '星间都市山脉 奥林波斯', id: '1465973161', info:'大西洋异闻带，跨越星海的来客，建立的永恒繁荣之都'},
      {title: '妖精圆桌领域 阿瓦隆·勒·菲', id: '1905664112', info:'不列颠异闻带，永恒的黄昏之岛，自乐园而来的巡礼'}
    ]
    return {
      titles,
      pictureName,
      lostbelts
    }
  }
}
</script>

<style scoped>
  .center-content {
    display: flex;
  }
  .music-box {
    width: 800px;
    margin: 0 50px;
  }
  .picture {
    display: flex;
    width: 300px;
  }
  .introduction {
    padding: 0 20px;
    box-shadow: var(--el-box-shadow);
    box-sizing: border-box;
  }
  h1, h2, h4 {
    text-align: center;
    margin: 10px 0;
  }
  ol {
    padding: 5px 20px;
    font-size: 14px;
  }
  .tips {
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding-bottom: 10px;
  }
  .lostbelt {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .info {
    width: 600px;
    text-align: center;
  }
</style>